<template>
    <main>
        <img :src="list.bannerFileUrl" alt="">
        <section style="position:relative;">
            <div class="title">
                {{learnNumlist.courseTitle}}
            </div>
            <div class="people">
                累计{{learnNumlist.learnNum}}人学习
                <Rate></Rate>
            </div>

            <div class="price" :style="{color:color}">{{pricelist.price}}
            <span style="color:red;font-size:14px;text-decoration: line-through;margin-left:4px">{{beforePrice}}</span></div>
            <span class="discount" v-if="discountDesc?true:false">{{discountDesc}}</span>
            <div class="watch">
                <button class="firstBtn" v-if='pricelist.nofree?true:false' @click="buy">
                    {{pricelist.nofree}}
                </button>
                <button class="sectionBtn">{{pricelist.watch}}</button>
            </div>
        </section>
        <button class="iconfont">&#xe601;收藏</button>
    </main>
</template>

<script>
    import Rate from '../components/Rate'
    // import {ordinaryLogin} from "../api/api";
    export default {
        name: "VideoDetails",
        components:{
            Rate
        },
        data() {
            return {
                list: [],
                price: '',
                beforePrice:'',
                watch: '',
                nofree: '',
                pricelist: {},
                learnNumlist: {},
                sectionslist: "",
                color:'#000000',
                discountDesc:''
            }
        },
        methods: {
            free(res) {
                if (res.data.data.isFree == 1) {
                    this.price = '免费',
                    this.watch = '立即观看'
                    this.color='#00cf8c'
                    return this.pricelist = { price: this.price, watch: this.watch }
                } else {
                    this.price = '￥' + res.data.data.discountPrice;
                    this.beforePrice = '￥' + res.data.data.coursePrice;
                    // this.price = '￥' + res.data.data.coursePrice;
                    this.watch = '加入购物车';
                    this.nofree = '立即购买';
                    return this.pricelist = {
                        price: this.price,
                        nofree: this.nofree, watch: this.watch
                    }
                }

            },
            buy(){
                console.log(this.$store.state.isLogin)
                if(this.$store.state.isLogin == false){
                    // ordinaryLogin(this.username,this.password).then(res => {
                    //     if(res.data.code === 0){
                    //         this.$message.success(
                    //             res.data.msg,
                    //             3,
                    //             this.visible=false
                    //         );
                    //         //改变全局isLogin和userInfo
                    //         this.$store.commit('changeIsLogin',{
                    //             isLogin:!this.$store.state.isLogin,
                    //             userInfo:res.data.userInfo
                    //         })
                    //
                    //     }else{
                    //         this.$message.error(res.data.msg,3);
                    //     }
                    //
                    // })
                    this.$store.commit('changeVisible',true)
                }
            }
        },
        created() {
            this.$axios
                .get(
                    `http://wkt.myhope365.com//pc/course/detail/${this.$route.query.courseid}`
                ).then((res) => {
                this.list = res.data.data;
                this.pricelist = this.free(res)
                this.learnNumlist = {
                    learnNum: res.data.data.participationsCount,
                    courseTitle: res.data.data.courseTitle,
                    courseDetail: res.data.data.courseDetail
                }
                this.sectionslist = res.data.data.sections;
                this.discountDesc = res.data.data.discountDesc
                console.log(this.sectionslist);
            });
        }
    }
</script>

<style scoped>
    /* 内容部分开始 */

    main>main{
        position: relative;
        overflow: hidden;
        padding: 20px;
        height: 271px;
        margin: auto;
        width: 1200px;
        background-color: white;
    }
    main>main>img{
        display: block;
        float: left;
        width: 330px;
        height:220px
    }
    main>main>button{
        position: absolute;
        font-size: 16px;
        border: 0;
        background-color: white;
        border: 1px solid #999;
        color: #999;
        outline: none;
        top: 30px;
        right: 32px;
        width: 110px;
        height: 30px;
    }
    main>main>section{
        padding: 20px 25px 0 60px;
        float: left;
        width: 770px;
        height: 220px;
        box-sizing: border-box;
    }
    .title{
        overflow: hidden;
        font-size: 24px;
        margin-bottom: 14px;
    }
    .title>li{
        padding-right: 20px;
        float: left;
    }
    .classList{
        padding-bottom: 30px!important;
        display: none;
    }
    .comments{
        display: none;
    }
    .people{
        color: #888;
        margin-bottom: 14px;
    }
    .price{
        margin-top: -18px;
        font-size: 24px;
    }
    .firstBtn,
    .sectionBtn{
        font-size: 18px;
        margin-top: 44px;
        border: 0;
        outline: none;
        width: 160px;
        height: 45px;
        background-color: #00cf8c;
        color: white;
    }
    .firstBtn{
        margin-right: 10px;
        background-color: rgb(255, 128, 0);
    }
    .sectionBtn:hover{
        background-color:#23db9b;
    }
    .sectionBtn:active{
        background-color: #00a879;
    }
    /*限时钜惠*/
    .discount{
        padding: 2px 6px 0 6px;
        position: absolute;
        left: 60px;
        bottom: 52px;
        /*display: block;*/
        font-size: 12px;
        color: #fa8c16!important;
        background: #fff7e6;
        border: 1px solid #ffd591;
    }
</style>